<!-- 列表广告 -->
<template>
    <div class="listimg">
        <div class="top">
            <div class="top-left img_box">
                <img src="https://img02.hua.com/chanpintupian/2022shouye/lr.png?v2" alt="">
            </div>
            <div class="top-rig">
                <div class="rig-top img_box">
                    <img src="	https://img02.hua.com/chanpintupian/2022shouye/zb.png?v2" alt="">
                </div>
                <div class="rig-bot img_box">
                    <img src="https://img02.hua.com/chanpintupian/2022shouye/py.png?v2" alt="">
                </div>
            </div>
        </div>
        <div class="bot">
            <div class="bot_left img_box">
                <img src="	https://img02.hua.com/chanpintupian/2022shouye/rx.png?v1" alt="">
            </div>
            <div class="bot_min img_box">
                <img src="https://img02.hua.com/chanpintupian/2022shouye/tj.png?v1" alt="">
            </div>
            <div class="bot_rig img_box">
                <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
                    <van-swipe-item class="sw-1 sw"><img src="https://img02.hua.com/chanpintupian/2022shouye/sjs.png?v1"
                            alt=""></van-swipe-item>
                    <van-swipe-item class="sw-2 sw"><img src="https://img02.hua.com/chanpintupian/2022shouye/xp.png?v1"
                            alt=""></van-swipe-item>
                </van-swipe>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "listimg"
}
</script>
<style scoped lang="less">
.listimg {
    margin: 0 .24rem;
    margin-top: .24rem;

}

.img_box {
    position: relative;
}

img {
    position: absolute;
}

.top {
    display: flex;
    justify-content: space-between;
    border-radius: .2rem;

    .top-left {
        width: 3.4rem;
        height: 3.34rem;
        background-image: url(https://img02.hua.com//chanpintupian/2022shouye/slr5.png);
        background-size: 100% 100%;
        padding-right: .12rem;

        img {
            width: 2rem;
            height: 2rem;
            bottom: .1rem;
            right: .1rem;
        }
    }

    ;

    .top-rig {
        width: 3.4rem;
        padding-left: .12rem;
        display: flex;
        flex-wrap: wrap;

        div {
            width: 3.4rem;
            height: 1.6rem;

            img {
                width: 1.4rem;
                height: 1.1rem;
                bottom: .2rem;
                right: .05rem;
            }
        }

        ;

        .rig-top {
            background-image: url(https://img02.hua.com/chanpintupian/2022shouye/szb.png?v12);
            background-size: 100% 100%;
        }

        ;

        .rig-bot {
            align-self: flex-end;
            background-image: url(https://img02.hua.com/chanpintupian/2022shouye/spy.png?v12);
            background-size: 100% 100%;
        }
    }
}

.bot {
    display: flex;
    justify-content: space-between;

    div {
        width: 33.3%;
        height: 2.5rem;

        img {
            width: 1.26rem;
            height: 1.26rem;
            bottom: .14rem;
            transform: translateX(50%)
        }
    }

    ;

    .bot_left {
        background: url(https://img02.hua.com//chanpintupian/2022shouye/rx6.png);
        background-size: 100% 100%;
    }

    ;

    .bot_min {
        background: url(https://img02.hua.com//chanpintupian/2022shouye/tj5.png);
        background-size: 100% 100%;
    }

    ;

    .bot_rig {
        .my-swipe {
            width: 100%;

            .van-swipe-item {
                width: 33.3%;
                height: 2.5rem;
                color: #fff;
                font-size: 20px;
                line-height: 150px;
                text-align: center;
                background-color: #39a9ed;

                img {
                    bottom: .14rem;
                    left:0;
                    }
                }

                ;

                .sw-1 {
                    background: url(https://img02.hua.com/chanpintupian/2022shouye/sjszx.png?v12);
                    background-size: 100% 100%;
                }

                ;

                .sw-2 {
                    background: url(https://img02.hua.com/chanpintupian/2022shouye/xplx.png?v12);
                    background-size: 100% 100%;
                }
            }
        }
    }
</style>